import Taro, {Component } from "@tarojs/taro";
import { View, Text, Image, RichText } from "@tarojs/components";
import { AtCurtain } from 'taro-ui'
import {inject, observer} from "@tarojs/mobx";
import {IStoreProps} from '../../store/Stores';
import { subTime, navigateTo } from '../../utils/common';

import { ArtPageOutput } from '../../api/api'
import './detail.scss'

interface IHomeProps extends IStoreProps {}
@inject("stores")
@observer
class Detail extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    item: {} as ArtPageOutput
  }

  componentWillMount() {
    this.getDynamicInfo(this.$router.params.id)
  }

  getDynamicInfo(id: string) {
    let { dynamicStore } = this.props.stores
    dynamicStore.getArticleDetail({
      form: { id },
      callback: res => {
        this.setState({ item: res })
      }
    })
  }

  link = (url: string = '/pages/index/index'): void => {
    navigateTo(url)
  }

  render() {
    let { item } = this.state
     return(
      <View className='article-wrap dynamic-article'>
       <View className='article-info'>
         <View className='title'>
           {item.artTitle}
         </View>
         <Text className='date'>{subTime(item.creationTime)}</Text>
       </View>
        <View className='article rich-text'>
          <RichText nodes={item.artContent} />
        </View>
      </View>
    )
  }
}

export default Detail
